<template>
	<view class="shijuan">
		<u-navbar :fixed="false" :placeholder="true" :title="' '" @leftClick="leftClick" bgColor="#0F53AC"
			leftIconColor="#fff">
		</u-navbar>
		<view class="page-cont" v-if="guideType != 4">
			<view class='top top1' v-if="guideType==1">
				<image class="i_one" src="../../../static/images/index/kaoshi111.png" mode=""></image>
				<view class='p_one'>左右滑动可切换上下题目</view>
				<view class="b_one" @click="guideType = 2">知道了</view>
			</view>
			<view class='top2' :style="{top: `${btnTop}px`}" v-if="guideType==2">
				<view class="v_two"></view>
				<image class="i_two" src="../../../static/images/index/kaoshi222.png" mode=""></image>
				<view class='p_two'>点击查看全部题目</view>
				<view class="b_two" @click="guideType = 3">知道了</view>
			</view>
			<view class='top3' :style="{top: `${btnTop}px`}" v-if="guideType==3">
				<view class="v_three"></view>
				<image class="i_three" src="../../../static/images/index/kaoshi333.png" mode=""></image>
				<view class='p_three'>点击交卷并签字即可完成试卷提交</view>
				<view class="b_three" @click="goExam()">开始考试</view>
			</view>
		</view>
		<view class="herder">
			<!-- <view class="date">
				<image class="jishiqi" src="../../../static/images/index/jishiqi.png" mode=""></image>
				<u-count-down ref="countDown" :time="examTime" format="HH:mm:ss" :autoStart="false"
					@finish="examFinish()" @change="(e)=> timeChange(e)"></u-count-down>
				<view class="date-time" @click="handleTime"></view>
			</view> -->
			<view class="left" @click="openPopup()">
				<image class="shiti" src="../../../static/images/index/shiti.png"></image>
				<view class="left-text"> <text class="dqTopic">{{topicIndex+1}}</text>/{{topicList.length}}</view>
			</view>
			<view class="btn learnBtn" @click="subTopicClick()">
				交卷
			</view>

		</view>
		<scroll-view scroll-y="true" style="height: 70vh;overflow-y: auto;overflow: hidden;">
			<view class="topic">
				<swiper class="swiper" :circular="false" :current="topicIndex" :indicator-dots="false" :autoplay="false"
					easing-function="easeInOutCubic" @animationfinish="(e) => swiperChange(e)">
					<swiper-item v-for="item,index in topicList" :key="index">
						<view class="swiper-item" v-if="item.subjectType == 1">
							<view class="topic-title">
								<view class="topicTitle">
									<text class="type bg2">单选题</text><span
										style="word-break: break-all;word-wrap: break-word;">{{index+1}}、{{item.title}}</span>
								</view>
							</view>
							<u-radio-group placement="column" @change="(e)=>radioChange(e,item,index)">
								<u-radio activeColor="#0F53AC"
									:labelColor="examAnswers[index] && examAnswers[index].answers[0] == i.option?'#0F53AC':'#666666'"
									:customStyle="{marginBottom: '16px',borderRadius: '10px',background: examAnswers[index] && examAnswers[index].answers[0] == i.option?'rgba(15, 83, 172, 0.1)':'',padding:'16rpx 32rpx',border: examAnswers[index] && examAnswers[index].answers[0] == i.option?'':'1px solid rgba(237, 237, 237, 1)'}"
									v-for="(i, idx) in item.optionArray" :key="idx" :label="i.option +'、'+ i.val"
									:name="i.option">
								</u-radio>
							</u-radio-group>

						</view>
						<view class="swiper-item" v-if="item.subjectType == 2">
							<view class="topic-title">
								<view class="topicTitle">
									<text class="type bg1">多选题</text><span
										style="word-break: break-all;word-wrap: break-word;">{{index+1}}、{{item.title}}</span>
								</view>
							</view>
							<u-checkbox-group placement="column" @change="(e)=>checkboxChange(e,item.id,index)">
								<u-checkbox activeColor="#0F53AC"
									:labelColor="examAnswers[index] && examAnswers[index].answers.includes(i.option)?'#0F53AC':'#666666'"
									:customStyle="{marginBottom: '16px',borderRadius: '10px',background: examAnswers[index] && examAnswers[index].answers.includes(i.option)?'rgba(15, 83, 172, 0.1)':'',padding:'24rpx 32rpx',border: examAnswers[index] && examAnswers[index].answers[0] == i.option?'':'1px solid #EDEDED'}"
									v-for="(i, idx) in item.optionArray" :key="idx" :label="i.option +'、'+ i.val"
									:name="i.option">
								</u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="swiper-item" v-if="item.subjectType == 3">
							<view class="topic-title">
								<view class="topicTitle">
									<text class="type bg3">判断题</text><span
										style="word-break: break-all;word-wrap: break-word;">{{index+1}}、{{item.title}}</span>
								</view>
							</view>
							<u-radio-group placement="column" @change="(e)=>radioChange(e,item,index)">
								<u-radio activeColor="#0F53AC"
									:labelColor="examAnswers[index] && examAnswers[index].answers[0] == i.option?'#0F53AC':'#666666'"
									:customStyle="{marginBottom: '16px',borderRadius: '10px',background: examAnswers[index] && examAnswers[index].answers[0] == i.option?'rgba(15, 83, 172, 0.1)':'',padding:'24rpx 32rpx',border: examAnswers[index] && examAnswers[index].answers[0] == i.option?'':'1px solid #EDEDED'}"
									v-for="(i, idx) in item.optionArray" :key="idx" :label="i.val" :name="i.option">
								</u-radio>
							</u-radio-group>
						</view>
						<view class="swiper-item" v-if="item.subjectType == 4">
							<view class="topic-title">
								<view class="topicTitle">
									<text class="type bg4">填空题</text><span
										style="word-break: break-all;word-wrap: break-word;">{{index+1}}、{{item.title}}</span>
								</view>
							</view>
							<view v-for="(i,j) in item.title.split('（）')" :key="j" class="topicAnwers">
								<view v-if="j != item.title.split('（）').length-1">
									<view style="margin-bottom: 16rpx;">
										{{`第${j+1}处答案：`}}
									</view>
									<u--input class="myanswer" placeholder="请输入答案" border="surround"
										:customStyle="{padding: '24rpx 16rpx'}"
										@change="(e) => inputChange(e,item.id,index,j,item.title.split('（）').length-1)">
									</u--input>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</scroll-view>
		<!-- <view class="footer">
			<view class="right">
				<view class="btn1" @click="lastTopic()"
					:style="topicIndex==0?'opacity: 0.5':''" :disabled="topicIndex==0">上一题
				</view>
				<view class="btn2" @click="nextTopic()"
					:style="topicIndex==topicList.length -1?'opacity: 0.5':''"
					:disabled="topicIndex==topicList.length -1">下一题</view>
			</view>
		</view> -->
		<view class="bottom-subside" style="height:152rpx"></view>
		<view class="kiss-bottom-double">
			<view class="btn-left" :style="topicIndex==0?'color: rgba(15, 83, 172, 0.5);':''" :disabled="topicIndex==0"
				@click="lastTopic()">上一题</view>
			<view class="btn-right" :style="topicIndex==topicList.length -1?'background: rgba(15, 83, 172, 0.5);':''"
				:disabled="topicIndex==topicList.length -1" @click="nextTopic()">下一题</view>
		</view>
		<u-popup :show="showPopup" @close="close" round="10">
			<div class="popup">
				<u-sticky bgColor="#fff">
					<view class="popupHerder">
						<view class="title">
							答题卡
						</view>
						<view class="last">
							<u-icon name="close" color="#2979ff" size="22" @click="showPopup = false"></u-icon>
						</view>
					</view>
					<view class="popupCenter">
						<view class="tuli">
							<view class="yes">
								<view class="quan"></view>
								<view>已做</view>
							</view>
							<view class="no">
								<view class="quan1"></view>
								<view>未做</view>
							</view>
						</view>
						<view style="margin-right: 10rpx;"><span style="color: #0F53AC;">
								{{examAnswers.filter(item=>item.answers.length).length}}</span>/<span
								style="color: #8C8C8C;">{{topicList.length}}</span>
						</view>
					</view>
				</u-sticky>
				<view v-for="(it,ix) in subjectTypeSort" :key="ix">
					<view class="popupType" v-if="topicList.filter(item=>item.subjectType==it).length">
						{{['单选题','多选题','判断题','填空题'][it - 1]}}
					</view>
					<view class="popupAnswer">
						<view v-for="item,index in topicList" class="answerBox" v-if="item.subjectType==it"
							:key="index">
							<view
								:class="examAnswers[index] && examAnswers[index].answers.join(',') != '' ? 'quan2' : 'quan3'"
								@click="goTopic(index)">
								{{index+1}}
							</view>
						</view>
					</view>
				</view>
			</div>
		</u-popup>
		<u-modal :show="modelShow" :title="modelTitle" :content='modelContent' cancelText="继续作答" confirmColor="#0F53AC"
			:showCancelButton="showCancelButton" @confirm="modelConfirm()" @cancel="modelCancel()">
			<view class="slot-content">
				<rich-text :nodes="modelContent"></rich-text>
				<rich-text v-if="isSign" class="sigin" :nodes="'您已设置一键签名，无需考试签字'">
				</rich-text>
			</view>
		</u-modal>

		<u-modal :show="passTime" title="提示" cancelText="交卷" confirmText="继续答题" :showCancelButton="true"
			confirmColor="#0F53AC" @confirm="goOnExam()" @cancel="endExam()">
			<view class="slot-content">
				<rich-text :nodes="modelContent"></rich-text>
				<rich-text v-if="isSign" class="sigin" style="text-align: center;font-size: 16rpx;" :nodes="timeText">
				</rich-text>
			</view>
		</u-modal>

		<u-modal :show="leftBack" title="确定退出吗？" cancelText="继续答题" confirmText="确定" :showCancelButton="true"
			confirmColor="#0F53AC" @confirm="goBack()" @cancel="goOnExam2()">
			<view class="slot-content">
				<rich-text :nodes="modelContent"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				guideType: 4,
				topicList: [], //题目数据
				topicIndex: 0, //题目序号
				examTime: 0, //考试时间
				examAnswers: [], //答案数据
				useSeconds: '', //考试用时
				tkAnswer: [],
				showPopup: false, //弹出框
				params: {
					examPaperId: '',
					trainId: ''
				},
				//模态框
				modelShow: false,
				modelTitle: '',
				modelContent: '',
				showCancelButton: false,
				// 是否设置过签名
				isSign: false,
				oldSign: '',
				passTime: false,
				timeText: '',
				btnTop: 0,
				leftBack: false,
				subjectTypeSort: [1, 2, 3, 4],
				formType: 'kaoshi',
				handleFlag: true,
				alignExam:0,
				examFinish:0
			}
		},
		onLoad(options) {
			this.examTime = +options.examTime * 1000
			this.params.examPaperId = options.examPaperId
			this.params.trainId = options.trainId
			this.examAnswers = []
			this.getExamSubject()
			this.getSign()
			if (options.formType) {
				this.formType = options.formType
			}
			if(options.alignExam){
				this.alignExam = options.alignExam
			}
			if(options.examFinish){
				this.examFinish = options.examFinish
			}

			var query = wx.createSelectorQuery(); // 创建节点选择器
			query.select('.learnBtn').boundingClientRect()
			query.exec((res) => {
				console.log(res[0]) // #the-id节点的上边界坐标
				this.btnTop = res[0].top - 10
			})

		},
		methods: {
			getSign(type = false) {
				uni.$u.http.get(`/base/mobile/userInfo/getLoginUserInfo`).then(res => {
					if (res.code == 0) {
						if (res.data.userSign) {
							this.isSign = true
							this.oldSign = res.data.userSign
						}
					}
				}).catch(err => {})
			},
			goExam() {
				this.guideType = 4
				// this.$refs.countDown.start();
			},
			leftClick() {
				let arr = this.examAnswers.filter(item => {
					if (item.answers != '') {
						return item
					}
				})
				this.modelContent = `当前做题进度${arr.length}/${this.examAnswers.length}题`
				this.leftBack = true
			},
			getExamSubject() {
				uni.$u.http.get(`/train/mobile/exam/mobileSubjectSortList/${this.params.examPaperId}`).then(ret => {
					if (ret.code == 0) {
						let arr = []
						ret.data.map(item => {
							arr.push(item.subjectType)
						})
						this.subjectTypeSort = arr
					}
				})


				uni.$u.http.get(`/train/mobile/exam/getExamSubject/${this.params.examPaperId}`).then(res => {
					if (res.code == 0) {
						this.topicList = res.data
						this.topicList.forEach(i => {
							this.examAnswers.push({
								esId: '',
								answers: []
							})
						})
						uni.$u.http.get(`/train/mobile/exam/examFlag`).then(ret => {
							// this.guideType = 3
							// return
							if (ret.data == 1) {
								this.goExam()
							} else {
								this.guideType = 1
							}
						})

					}
				}).catch(err => {})
			},
			swiperChange(e) {
				this.topicIndex = e.detail.current
			},
			//单选值变化
			radioChange(e, it, idx) {
				if (this.examAnswers[idx]) {
					this.examAnswers[idx].answers = []
					this.examAnswers[idx].esId = it.id
					this.examAnswers[idx].answers.push(e)
				}
				// console.log(this.examAnswers.filter(i=> i.answers.length != 0 && i.esId == item.id).answers.length);
			},
			//多选值变化
			checkboxChange(e, id, idx) {
				this.examAnswers[idx].esId = id
				this.examAnswers[idx].answers = e
				console.log(e)
			},
			//填空题值变化
			inputChange(e, id, idx, i, length) {
				this.examAnswers[idx].esId = id
				if (this.examAnswers[idx].answers == '') {
					this.tkAnswer = new Array(length).fill('')
					this.tkAnswer[i] = e
					this.examAnswers[idx].answers = this.tkAnswer
				} else {
					this.tkAnswer = this.examAnswers[idx].answers
					this.tkAnswer[i] = e
					this.examAnswers[idx].answers = this.tkAnswer
				}
				console.log(this.examAnswers[idx]);
			},
			//下一题
			nextTopic() {
				if (this.topicIndex < this.topicList.length - 1) {
					// if (this.swiperCurrentTimeout) clearTimeout(this.swiperCurrentTimeout);
					// this.swiperCurrentTimeout = setTimeout(() => {

					// }, 1000);
					if (this.handleFlag) {
						this.topicIndex++
						this.handleFlag = false
						setTimeout(() => {
							this.handleFlag = true
						}, 1000)
					}
					if (!this.examAnswers[this.topicIndex]) {
						this.examAnswers.push({
							esId: '',
							answers: ''
						})
					}
				}
			},
			//上一题
			lastTopic() {
				if (this.topicIndex > 0) {
					// if (this.swiperCurrentTimeout) clearTimeout(this.swiperCurrentTimeout);
					// this.swiperCurrentTimeout = setTimeout(() => {
					// 	this.topicIndex--
					// }, 1000);
					if (this.handleFlag) {
						this.topicIndex--
						this.handleFlag = false
						setTimeout(() => {
							this.handleFlag = true
						}, 1000)
					}
				}
			},
			//打开弹出框
			openPopup() {
				this.showPopup = true
			},
			close() {
				this.showPopup = false
			},
			//跳到指定题目
			goTopic(index) {
				this.showPopup = false
				this.topicIndex = index
			},
			// //考试时间结束时调用
			// examFinish() {
			// 	this.modelTitle = '提示'
			// 	this.modelContent = '很遗憾，考试时间结束，无法继续作答'
			// 	this.showCancelButton = false
			// 	this.modelShow = true
			// },
			modelConfirm() {
				let arr = []
				this.examAnswers.map(item => {
					let obj = {
						answers: '',
						esId: item.esId
					}
					if (item.answers && item.answers != '') {
						obj.answers = JSON.stringify(item.answers)
					}
					arr.push(obj)
				})
				let data = {
					examAnswers: arr,
					examPaperId: this.params.examPaperId,
					trainId: this.params.trainId,
					useSeconds: this.useSeconds * 0.001,
					signImg: ''
				}

				if (this.isSign) {
					uni.$u.http.get(
						`/base/upload/bindFileUrl?fileUrl=${this.oldSign}`
					).then(res => {
						if (res.code == 0) {
							data.signImg = res.data
							uni.$u.http.post(`/train/mobile/exam/handExam`, data).then(r => {
								if (r.code == 0) {
									uni.$u.toast('考试完成')
									setTimeout(() => {
										uni.navigateTo({
											url: `/pages/subPackagesC/exam/examfinish?trainId=${data.trainId}&examPaperId=${data.examPaperId}&formType=${this.formType}&examFinish=${1}`
										})
									}, 500)
								}
							}).catch(err => {})
						}
					}).catch(err => {})
					return
				}
				uni.navigateTo({
					url: `/pages/subPackagesC/exam/examSignature?params=${JSON.stringify(data)}`
				})
			},
			// //监听剩余时间,计算考试用时
			// timeChange(e) {
			// 	let t = e.hours * 60 * 60 * 1000 + e.minutes * 60 * 1000 + e.seconds * 1000
			// 	this.useSeconds = this.examTime - t
			// },
			//交卷
			subTopicClick() {
				// this.$refs.countDown.pause();
				let arr = this.examAnswers.filter(item => {
					if (item.answers != '') {
						return item
					}
				})
				this.modelTitle = '确定交卷吗？'
				this.modelContent = `当前做题进度进度${arr.length}/${this.examAnswers.length}题`
				this.showCancelButton = true
				this.modelShow = true
			},
			//继续作答
			modelCancel() {
				// this.$refs.countDown.start();
				this.modelShow = false
			},
			handleTime() {
				// this.$refs.countDown.pause();
				let arr = this.examAnswers.filter(item => {
					if (item.answers != '') {
						return item
					}
				})
				this.modelContent = `当前做题进度进度${arr.length}/${this.examAnswers.length}题`
				this.timeText = `用时：${this.getTime(this.useSeconds * 0.001)}`
				this.passTime = true
			},
			// 继续答题
			goOnExam() {
				// this.$refs.countDown.start();
				this.passTime = false
			},
			goOnExam2() {
				this.leftBack = false
			},
			goBack() {
				this.leftBack = false
				if(this.alignExam == 1){
					console.log(this.examFinish)
					if(this.examFinish == 1){
						let pages = getCurrentPages(); //获取所有页面栈实例列表
						let nowPage = pages[pages.length - 1]; //当前页页面实例
						let prevPage = pages[pages.length - 4]; //上一页页面实例
						prevPage.data.recordNeeded = true;
						uni.navigateBack({
							delta: 3
						})
					}else{
						let pages = getCurrentPages(); //获取所有页面栈实例列表
						let nowPage = pages[pages.length - 1]; //当前页页面实例
						let prevPage = pages[pages.length - 3]; //上一页页面实例
						prevPage.data.recordNeeded = true;
						uni.navigateBack({
							delta: 2
						})
					}
					
				}else{
					uni.navigateBack({
						delta: 1
					})
				}
				
			},
			// 交卷
			endExam() {
				this.passTime = false
				this.subTopicClick()
			},
			// 毫秒转成时分秒
			getTime(time) {
				// 转换为式分秒
				let h = parseInt(time / 60 / 60 % 24)
				h = h < 10 ? '0' + h : h
				let m = parseInt(time / 60 % 60)
				m = m < 10 ? '0' + m : m
				let s = parseInt(time % 60)
				s = s < 10 ? '0' + s : s
				// 作为返回值返回
				return `${h}:${m}:${s}`
			}
		}
	}
</script>

<style lang="scss">
	.shijuan {
		// background-color: rgba(242, 242, 242, 1);

		.herder {
			width: 100%;
			box-sizing: border-box;
			// background-color: rgba(242, 242, 242, 1);
			border-bottom: 1px solid rgba(237, 237, 237, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 28rpx 32rpx;
			z-index: 9;
			top: 0;
			font-size: 32rpx;
			font-weight: 400;
			position: relative;

			.left {
				display: flex;

				.shiti {
					width: 56rpx;
					height: 56rpx;
					margin-right: 10rpx;
				}

				.left-text {
					line-height: 56rpx;
					font-size: 17px;
					font-weight: 400;
				}
			}

			.date {
				display: flex;
				align-items: center;
				position: relative;

				.jishiqi {
					width: 40rpx;
					height: 40rpx;
				}

				.date-time {
					position: absolute;
					width: 185rpx;
					height: 50rpx;
					background-color: #fff;
					opacity: 0;
				}
			}
		}

		.topic {
			padding: 0 16px;
			height: 100%;
			overflow: scroll;
			// background-color: rgba(242, 242, 242, 1);

			.swiper {

				position: relative;
				background: rgba(255, 255, 255, 1);
				height: 100%;
				width: 100%;

				swiper-item {
					overflow-y: auto;
				}

				.swiper-item {
					padding: 20rpx 0;

					.topic-title {
						display: flex;
						margin-bottom: 48rpx;

						// .topicType {
						// 	width: 96rpx;
						// 	min-width: 96rpx;
						// 	height: 44rpx;
						// 	line-height: 44rpx;
						// 	display: flex;
						// 	justify-content: center;
						// 	align-items: center;
						// 	font-size: 12px;
						// 	font-weight: 400;
						// 	border-radius: 4px;
						// }

						.bg1 {
							color: #2A82E4;
							background: rgba(42, 130, 228, 0.2);
						}

						.bg2 {
							color: #1BB357;
							background: rgba(27, 179, 87, 0.2);
						}

						.bg3 {
							color: #D18800;
							background-color: rgba(209, 136, 0, 0.2);
						}

						.bg4 {
							color: #10A399;
							background: rgba(16, 163, 153, 0.2);
						}

						.topicTitle {
							.type {
								width: 96rpx;
								min-width: 96rpx;
								height: 44rpx;
								line-height: 44rpx;
								margin-right: 10rpx;
								padding: 4rpx 24rpx;
								font-size: 12px;
								font-weight: 400;
								border-radius: 4px;
							}
						}

					}

					.topicAnwers {
						margin-top: 48rpx;

						.u-input {
							background-color: rgba(242, 242, 242, 1);
							padding: 24rpx 16rpx;
						}
					}

					.u-checkbox-group {
						.u-checkbox {

							text {
								width: 100%;
								padding: 12px 0;
								word-break: break-all;
								word-wrap: break-word;
							}
						}
					}

					.u-radio-group {
						text {
							width: 100%;
							padding: 12px 0;
							word-break: break-all;
							word-wrap: break-word;
						}
					}


				}
			}

		}

		.footer {
			border-top: 1px solid rgba(242, 242, 242, 1);
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			padding: 20rpx 32rpx;
			z-index: 9;
			bottom: 0;
			font-size: 32rpx;
			font-weight: 400;

			.right {
				display: flex;
			}
		}

		.btn {
			// width: 46px;
			margin-left: 10rpx;
			padding: 12rpx 48rpx;
			border-radius: 4px;
			background: #0F53AC;
			text-align: center;
			color: #fff;
			font-size: 14px;
			font-weight: 400;
			line-height: 22px;
		}

		.btn1 {
			width: 168px;
			margin-left: 10rpx;
			padding: 22rpx 0;
			border-radius: 6px;
			border: 2rpx solid #0F53AC;
			// background: #0F53AC;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #0F53AC;
			font-size: 28rpx;
		}

		.btn2 {
			width: 168px;
			margin-left: 10rpx;
			padding: 22rpx 0;
			border-radius: 6px;
			background: #0F53AC;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 28rpx;
		}

		.popup {
			height: 75vh;
			overflow-y: scroll;

			.popupHerder {
				display: flex;
				justify-content: center;
				padding: 28rpx 32rpx;
				// border-bottom: 2rpx solid black;

				.title {
					font-size: 36rpx;
					font-weight: 500;
					text-align: center;
				}

				.last {
					position: absolute;
					right: 8px;
				}
			}

			.popupCenter {
				display: flex;
				justify-content: space-between;
				background: rgba(242, 242, 242, 1);
				padding: 28rpx 32rpx;

				.tuli {
					display: flex;

					.yes {
						display: flex;
						margin-right: 20rpx;
						font-size: 28rpx;
						align-items: center;
						color: #0F53AC;
					}

					.no {
						color: #8C8C8C;
						display: flex;
						margin-right: 20rpx;
						font-size: 28rpx;
						align-items: center;
					}
				}
			}

			.popupType {
				font-size: 34rpx;
				font-weight: 500;
				line-height: 50rpx;
				color: rgba(43, 43, 43, 1);
				margin: 32rpx;
			}

			.popupAnswer {
				display: flex;
				flex-flow: wrap;

				.answerBox {
					width: 20%;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 32rpx;
				}
			}


		}
	}


	.quan {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
		border-radius: 24rpx;
		// background: rgba(15, 83, 172, 0.2);
		border: 1px solid #0F53AC;
	}

	.quan1 {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
		border-radius: 24rpx;
		border: 2rpx solid #A6A6A6;
	}

	.quan2 {
		width: 96rpx;
		height: 96rpx;
		border-radius: 96rpx;
		text-align: center;
		line-height: 96rpx;
		// background: rgba(15, 83, 172, 0.2);
		border: 1px solid #0F53AC;
		color: #0F53AC;
	}

	.quan3 {
		width: 96rpx;
		height: 96rpx;
		border-radius: 96rpx;
		line-height: 96rpx;
		border: 1px solid rgba(140, 140, 140, 1);
		text-align: center;
		color: #8C8C8C;
	}

	.u-modal__content__text {
		text-align: center;
	}

	.page-cont,
	.shadow-box {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 555;
		background-color: rgba(22, 23, 24, 0.5);
	}

	.page-cont {
		.top2 {
			width: 100%;
			height: 200px;
			position: fixed;
			top: 20px;
			left: 8px;

			.v_two {
				position: absolute;
				top: 0;
				left: 0;
				width: 200rpx;
				height: 110rpx;
				background-color: rgba(255, 255, 255, 0.3);
			}

			.i_two {
				position: absolute;
				width: 210rpx;
				height: 112rpx;
				font-size: 32rpx;
				line-height: 72rpx;
				color: #fff;
				text-align: center;
				border-radius: 34rpx;
				top: 110rpx;
				left: 74rpx;
			}

			.p_two {
				float: right;
				width: 80%;
				font-size: 32rpx;
				line-height: 72rpx;
				color: #fff;
				text-align: center;
				border-radius: 34rpx;
				position: absolute;
				top: 206rpx;
				left: 74rpx;
			}

			.b_two {
				float: right;
				line-height: 72rpx;
				text-align: center;
				// margin: 5% 0 0 35%;
				width: 148rpx;
				padding: 8rpx 16rpx;
				border-radius: 6px;
				background: rgba(255, 255, 255, 1.0);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #0F53AC;
				font-size: 28rpx;
				position: absolute;
				top: 290rpx;
				left: 280rpx;
			}
		}

		.top3 {
			width: 100%;
			height: 200px;
			position: fixed;
			top: 20px;
			right: 8px;

			.v_three {
				position: absolute;
				top: 0;
				right: 0;
				width: 114px;
				height: 100rpx;
				background-color: rgba(255, 255, 255, 0.3);
			}

			.i_three {
				position: absolute;
				top: 100rpx;
				right: 74rpx;
				width: 130rpx;
				height: 104rpx;
				font-size: 32rpx;
				line-height: 72rpx;
				color: #fff;
				text-align: center;
				border-radius: 34rpx;
			}

			.p_three {
				position: absolute;
				top: 206rpx;
				right: 74rpx;
				font-size: 32rpx;
				line-height: 72rpx;
				color: #fff;
				text-align: center;
				border-radius: 34rpx;
			}

			.b_three {
				position: absolute;
				top: 290rpx;
				right: 210rpx;
				line-height: 72rpx;
				text-align: center;
				width: 148rpx;
				padding: 8rpx 16rpx;
				border-radius: 6px;
				background: rgba(255, 255, 255, 1.0);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #0F53AC;
				font-size: 28rpx;
			}
		}
	}

	.page-cont .top {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.page-cont .top .p_one {
		float: right;
		width: 80%;
		font-size: 32rpx;
		line-height: 72rpx;
		color: #fff;
		text-align: center;
		border-radius: 34rpx;
		margin: 10% 0 0 10%;
	}

	.page-cont .top .i_one {
		float: right;
		width: 294rpx;
		height: 112rpx;
		font-size: 32rpx;
		line-height: 72rpx;
		color: #fff;
		text-align: center;
		border-radius: 34rpx;
		margin: 55% 0 0 30%;
	}

	.page-cont .top .b_one {
		float: right;
		line-height: 72rpx;
		text-align: center;
		margin: 10% 0 0 35%;
		width: 148rpx;
		padding: 16rpx 32rpx;
		border-radius: 6px;
		background: rgba(255, 255, 255, 1.0);
		display: flex;
		justify-content: center;
		align-items: center;
		color: #0F53AC;
		font-size: 28rpx;
	}

	.page-cont .top .p_two {
		float: right;
		width: 80%;
		font-size: 32rpx;
		line-height: 72rpx;
		color: #fff;
		text-align: center;
		border-radius: 34rpx;
		position: fixed;
		top: 190px;
		left: 0;
		// margin: 155% 0 0 10%;
	}

	.page-cont .top .i_two {
		position: absolute;
		width: 210rpx;
		height: 112rpx;
		font-size: 32rpx;
		line-height: 72rpx;
		color: #fff;
		text-align: center;
		border-radius: 34rpx;
		// margin: 160% 0 0 5%;
		position: fixed;
		top: 280rpx;
	}

	.page-cont .top .b_two {
		float: right;
		line-height: 72rpx;
		text-align: center;
		// margin: 5% 0 0 35%;
		width: 148rpx;
		padding: 8rpx 16rpx;
		border-radius: 6px;
		background: rgba(255, 255, 255, 1.0);
		display: flex;
		justify-content: center;
		align-items: center;
		color: #0F53AC;
		font-size: 28rpx;
		position: fixed;
		top: 230px;
		left: 235rpx;
	}

	.page-cont .top .v_two {
		position: fixed;
		top: 90px;
		width: 200rpx;
		height: 110rpx;
		z-index: -99999;
		background-color: rgba(255, 255, 255, 0.3);
	}

	.page-cont .top .p_three {
		width: 50%;
		font-size: 32rpx;
		line-height: 72rpx;
		color: #fff;
		text-align: center;
		border-radius: 34rpx;
		position: fixed;
		right: 190rpx;
		top: 316rpx;
	}

	.page-cont .top .i_three {
		position: fixed;
		right: 86rpx;
		top: 234rpx;
		width: 130rpx;
		height: 104rpx;
		font-size: 32rpx;
		line-height: 72rpx;
		color: #fff;
		text-align: center;
		border-radius: 34rpx;
	}

	.page-cont .top .b_three {
		line-height: 72rpx;
		text-align: center;
		width: 148rpx;
		padding: 8rpx 16rpx;
		border-radius: 6px;
		background: rgba(255, 255, 255, 1.0);
		display: flex;
		justify-content: center;
		align-items: center;
		color: #0F53AC;
		font-size: 28rpx;
		position: fixed;
		right: 290rpx;
		top: 460rpx;
	}

	.page-cont .top .v_three {
		position: fixed;
		right: 10px;
		top: 64px;
		width: 152rpx;
		height: 100rpx;
		z-index: -99999;
		background-color: rgba(255, 255, 255, 0.3);
	}

	.sigin {
		display: block;
		margin-top: 12rpx;
		font-size: 26rpx;
		color: #666666;
	}

	.dqTopic {
		color: rgba(15, 83, 172, 1);
	}
</style>
